<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="标题">
        <el-input
          v-model="formInline.title"
          placeholder="请输入标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="作者">
        <el-input
          v-model="formInline.author"
          placeholder="请输入作者名"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" placeholder="请选择状态" clearable >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="success"  @click="toAddNotice()" icon="el-icon-circle-plus-outline">添加</el-button>
    <br />
    <br />
    <el-table :data="tableData" border style="width: 100%">
      <!-- <el-table-column type="selection"/> -->

      <el-table-column type="index" label="编号" width="50" />
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column prop="author" label="作者"> </el-table-column>
      <el-table-column prop="content" label="内容"> </el-table-column>
      <el-table-column prop="status" label="状态"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-tooltip content="编辑" placement="top">
            <el-button
              @click="toUpdateNotice(scope.row)"
              type="primary"
              size="small"
              icon="el-icon-edit"
              circle
              :disabled="scope.row.status == '发布' ? true : false"

            ></el-button>
          </el-tooltip>
          <el-tooltip content="发布" placement="top">
            <el-button
              @click="publishNotice(scope.row)"
              type="success"
              size="small"
              icon="el-icon-top"
              circle
              :disabled="scope.row.status == '发布' ? true : false"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="下架" placement="top">
            <el-button
              @click="offNotice(scope.row)"
              type="warning"
              size="small"
              icon="el-icon-bottom"
              circle
              :disabled="scope.row.status == '下架' || scope.row.status == '未发布'? true : false"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button
              @click="deleteNotice(scope.row)"
              type="danger"
              size="small"
              icon="el-icon-delete"
              circle
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增编辑弹框  start -->
    <el-dialog
      :title="addtitle"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="refRuleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="ruleForm.author"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            v-model="ruleForm.content">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增编辑弹框  end -->

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.pageNumber"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
import { Message } from "element-ui";
import pagination from "../layout/pagination";
export default {
  name: "notice",
  components: {
    pagination,
  },
  created() {
    this.query();
  },

  methods: {
    query() {
      axios({
        url: this.$BASE_URL+"/notice/getNoticeList",
        params: this.formInline,
        headers: {
          token: localStorage.getItem("token"),
        },
      }).then(
        (resp) => {
          if (resp.data.code === 200) {
            this.tableData = resp.data.data.list;
            this.total = resp.data.data.total;
          } else {
            Message.error(resp.data.msg);
          }
        },
        (err) => {
          Message.error(err.msg);
        }
      );
    },
    deleteNotice(row) {
      this.$confirm("是否要删除该公告?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const id = row.id;
          axios({
            url: this.$BASE_URL+"/notice/deleteNotice",
            params: {
              id: id,
            },
            headers: {
              token: localStorage.getItem("token"),
            },
          }).then(
            (resp) => {
              if (resp.data.code === 200) {
                this.query();
                Message.success(resp.data.msg);
              } else {
                Message.error(resp.data.msg);
              }
            },
            (err) => {
              Message.error(err.msg);
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    offNotice(row) {
      this.$confirm("是否要下架该公告?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const id = row.id;
          axios({
            url: this.$BASE_URL+"/notice/offNotice",
            params: {
              id: id,
            },
            headers: {
              token: localStorage.getItem("token"),
            },
          }).then(
            (resp) => {
              if (resp.data.code === 200) {
                this.query();
                Message.success(resp.data.msg);
              } else {
                Message.error(resp.data.msg);
              }
            },
            (err) => {
              Message.error(err.msg);
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    publishNotice(row) {
      this.$confirm("是否要发布该公告?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const id = row.id;
          axios({
            url: this.$BASE_URL+"/notice/publishNotice",
            params: {
              id: id,
            },
            headers: {
              token: localStorage.getItem("token"),
            },
          }).then(
            (resp) => {
              if (resp.data.code === 200) {
                this.query();
                Message.success(resp.data.msg);
              } else {
                Message.error(resp.data.msg);
              }
            },
            (err) => {
              Message.error(err.msg);
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    addNotice() {
      axios({
            url: this.$BASE_URL+"/notice/addNotice",
            params: this.ruleForm,
            headers: {
              token: localStorage.getItem("token"),
            },
          }).then(
            (resp) => {
              if (resp.data.code === 200) {
                this.query();
                Message.success(resp.data.msg);
              } else {
                Message.error(resp.data.msg);
              }
            },
            (err) => {
              Message.error(err.msg);
            }
          );
    },
    updateNotice() {
      axios({
            url: this.$BASE_URL+"/notice/updateNotice",
            params: this.ruleForm,
            headers: {
              token: localStorage.getItem("token"),
            },
          }).then(
            (resp) => {
              if (resp.data.code === 200) {
                this.query();
                Message.success(resp.data.msg);
              } else {
                Message.error(resp.data.msg);
              }
            },
            (err) => {
              Message.error(err.msg);
            }
          );
    },
    // 新增
    toAddNotice() {
      this.dialogVisible = true;
      this.allid = null
    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    // 编辑
    toUpdateNotice(row) {
      // console.log(index, row.id);
      this.dialogVisible = true;   //显示弹框
      this.ruleForm = row;         //row当前行数据，把当前行的数据赋值给 表单
      this.allid = row.id;         //把id存全局
    },
    // 确定
    dialogVisibleConfirm() {
      // 新增接口
      if (this.allid == null) {
        // 新增
        this.addNotice()
        this.dialogVisible = false;
      } else {
          // 修改接口
        this.updateNotice()
        this.dialogVisible = false;
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.pageSize = val;
      this.query();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.pageNumber = val;
      this.query();
    },
  },
  data() {
    return {
      total: 0,
      formInline: {
        title: "",
        author: "",
        status: "",
        pageSize: 10,
        pageNumber: 1,
      },

      tableData: [],
      options: [
        {
          value: "0",
          label: "发布",
        },
        {
          value: "1",
          label: "下架",
        },
        {
          value: "2",
          label: "未发布",
        },
      ],

      //  添加或修改 弹出框内容
      dialogVisible: false,
      addtitle: "添加公告",
      ruleForm: {
        title: "",
        author: "",
        content: "",
      },
      allid: "",
      // 验证规则
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        author: [{ required: true, message: "请输入作者", trigger: "blur" }]
      }

    };
  },
};
</script>

<style scoped>
</style>
